<template>
    <rx-dialog @handOk="okFun" @cancel="cancelFun">
        <rx-layout>
            <div slot="center" style="padding: 0px 40px">
                <div>
                    <div class="InsNewsEdit-subject">{{ mdl.subject }}</div>
                    <div class="InsNewsEdit-user">
                        <span><my-icon type="iconpeople_fill"></my-icon>{{ mdl.author }}</span>
                        <span><my-icon type="icontime_fill"></my-icon>{{ mdl.createTime }}</span>
                        <span><my-icon type="iconbrowse_fill"></my-icon>{{ mdl.readTimes }}次</span>
                    </div>
                </div>
                <div class="InsNewsEdit-abstract">{{ mdl.keywords }}</div>
                <div class="InsNewsEdit-html" v-html="mdl.content"></div>
                <div class="InsNewsEdit-uploading">
                    <div class="InsNewsEdit-uploading-li">
                        <rx-attach-component v-model="imageUrl" :readonly="true" :fileType="'image'" :multiple="false" :length="'1'"></rx-attach-component>
                    </div>
                    <div class="InsNewsEdit-uploading-li">
                        <rx-attach-component v-model="fileList" :readonly="true" :fileType="'image'" :multiple="false" :length="'1'"></rx-attach-component>
                    </div>
                </div>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import InsNewsApi from '@/api/portal/core/insNews';
import {BaseForm, RxDialog, Util,TokenUtil} from "@lowcode/jpaas-common-lib";
import imgs from '@/image/css_sprites.png'

export default {
    name: 'InsNewsEdit',
    mixins: [BaseForm],
    components: {
        Util, RxDialog
    },
    props: {
        prefixCls: {
            type: String,
            default: 'ant-editor-quill'
        },
        value: {
            type: String
        },
        lydata: {},
        layerid: {},
        destroy: {}
    },
    data() {
        return {
            fileList: [],
            imageUrl: [],
            columnName: "",
            columnShow: false,
            columnDefList: [],
            editorOption: {},
            imgs:imgs,
            type: {
                media: ['.mp3', 'wav','.mp4', '.avi', '.rmvb','webm','ogg'],
                ppt: ['.ppt', '.pptx'],
                pdf: ['.pdf'],
                excel: ['.xls', '.xlsx'],
                word: ['.doc', '.docx'],
                image: [".jpg", ".jpeg", ".gif", ".png", ".svg", ".bmp"],
                txt: ['.txt'],
                rar: ['.rar'],
                zip: ['.zip']
            },
            officeAry : ['.ppt', '.pptx', '.xls', '.xlsx', '.doc', '.docx','.txt'],
            imgAry : [".jpg", ".jpeg", ".gif", ".png", ".svg", ".bmp"],
        }
    },
    filters: {
        getSize(bt) {
            if (bt / (1024 * 1024 * 1024) > 1) {
                return (bt / (1024 * 1024 * 1024)).toFixed(1) + "G";
            } else if (bt / (1024 * 1024) > 1) {
                return (bt / (1024 * 1024)).toFixed(1) + "M";
            } else {
                return Math.ceil(bt / (1024)) + "KB";
            }
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"InsNews",key);
        },
        okFun() {
            Util.closeWindow(this, "ok");
        },
        cancelFun() {
            Util.closeWindow(this, "cancel");
        },
        getInsColumnDefList() {
            InsNewsApi.queryByIsNews().then(data => {
                var result = data.data;
                for (var i = 0; i < result.length; i++) {
                    if (this.mdl.columnId == result[i].colId) {
                        this.columnName = result[i].name;
                    }
                }
            });
        },
        onload_(data) {
            if (typeof (data) == 'undefined') {
                this.mdl = Object.assign({
                    status: "Draft",
                    content: "",
                    readTimes: 0
                });
                this.form.setFieldsValue(this.mdl)
                return;
            }
            if (data.imgFileId) {
                var set = this;
                InsNewsApi.getByFileId(data.imgFileId).then(res=>{
                    var img = {
                        createTime:res.createTime,
                        fileId:res.fileId,
                        size:res.totalBytes,
                        name:res.fileName,
                        createBy:res.createBy,
                        uniqueIdentifier:res.md5

                    }
                    set.imageUrl.push(img)
                })
            }
            if (data.files) {
                this.fileList = JSON.parse(data.files);
            }
            this.getInsColumnDefList();
        },
        getPath(fileId) {
            var accessToken = TokenUtil.getToken();
            var url = `/api/api-system/system/core/sysFile/downloadScale/${fileId}?accessToken=` + accessToken;
            return url;
        },
        getDownLoadPath(file) {
            var accessToken = TokenUtil.getToken();
            var url = `/api/api-system/system/core/sysFile/download/${file.fileId}?accessToken=` + accessToken;
            return url;
        },
        get(id) {
            return InsNewsApi.readInsNews(id);
        },
        setClass(file) {
            if (!file) return;
            let extName = this.getSuffix(file);
            let fileType = this.type;
            for (let key in fileType) {
                let type = fileType[key];
                if (type.includes(extName)) {
                    return key + "Box";
                }
            }
            return "otherBox";
        },
        getSuffix(file) {
            let fileName = file.name;
            if(!fileName){
                return "";
            }
            let indexS = fileName.lastIndexOf(".");
            let _suffix = fileName.substr(indexS).toLowerCase();
            return _suffix;
        },
        openFile(file) {
            var accessToken = TokenUtil.getToken();
            var time=new Date().getTime();
            var url = `/api/api-system/system/core/sysFile/download/${file.fileId}?accessToken=${accessToken}&time=${time}` ;
            this.isUploaded(file.fileId,function(){
                window.open(url);
            })
        },
        isUploaded(fileId,callback){
            var self=this;
            InsNewsApi.getByFileId(fileId).then(res=>{
                if(res && res.uploadStatus=="YES"){
                    if(callback){
                        callback();
                    }
                    return;
                }
                self.$message.info(self.$comi18('formbase.lodop.fileUploading','当前文件正在上传...'));
            });
        },
    }
}
</script>
<style lang="less">
.InsNewsEdit-uploading-getSize{
    font-size: 14px;
    color: #c0c5cc;
    width: 100px;
}
.InsNewsEdit-uploading-li{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.InsNewsEdit-uploading-name{
    width: 70px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 10px;
    color: #46494d;
    margin-right: 83px;
}
.InsNewsEdit-uploading{
    background-color: #f8f8f8;
    width: 100%;
    border-radius: 5px 0px 5px 5px;
    margin-top: 50px;
    padding: 0px 18px;
}
.InsNewsEdit-html{
    width: 100%;
    margin-top: 30px;
    img {
        max-width: 100%;
    }
}
.InsNewsEdit-user{
    display: flex;
    align-items: center;
    color: #8a9199;
    font-size: 14px;
    justify-content: flex-end;
    border-bottom: solid 1px #d9d9d9;
    padding-bottom: 20px;
    i{
        margin-right: 8px;
    }
    span{
        margin-right: 19px;
    }
}
.InsNewsEdit-subject{
    color: #222222;
    font-size: 28px;
    text-align: center;
}
.InsNewsEdit-abstract{
    background-color: #f8f8f8;
    border-radius: 5px;
    width: 100%;
    line-height: 22px;
    letter-spacing: 0px;
    color: #555555;
    font-size: 14px;
    padding: 15px;
    margin-top: 20px;
}
.fileIcon {
    display: inline-block;
    margin-top: 4px;
    width: 26px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: -102px -60px;
    vertical-align: middle;
}

.fileText {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    height: 20px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wordBox {
    background-position: -56px -10px;
}

.txtBox {
    background-position: -56px -110px;
}

.pdfBox {
    background-position: -56px -60px;
}

.excelBox {
    background-position: -194px -10px;
}

.rarBox {
    background-position: -10px -110px;
}

.zipBox {
    background-position: -194px -110px;
}

.imageBox {
    background-position: -102px -60px;
}

.mediaBox {
    background-position: -148px -110px;
}

.otherBox {
    background-position: -102px -110px;
}

</style>
